<template>
  <el-drawer
    title="API申请"
    size="60%"
    :visible.sync="drawerVisible"
    direction="rtl"
    :close-on-press-escape="false"
    :wrapperClosable="false"
    :destroy-on-close="true"
    :before-close="beforeClose"
    custom-class="tag-drawer pac-apply-drawer"
  >
    <tag-step :step="step" :active="active"></tag-step>
    <pac-base v-if="active === 0" ref="pacModule" :apiInfo="apiInfo" @close="beforeClose" @next="next"></pac-base>
    <pac-result v-if="active === 1" ref="pacModule" :apiInfo="apiInfo" @refresh="refresh"></pac-result>
    <pac-personal-drawer ref="pacPersonalDrawer"></pac-personal-drawer>
  </el-drawer>
</template>

<script>
import pacBase from './apply-base-item'
import pacResult from './apply-result-item'
import pacPersonalDrawer from '../personal/package-personal-drawer'
export default {
  components: {
    pacBase,
    pacResult,
    pacPersonalDrawer
  },
  data() {
    return {
      drawerVisible: false,
      apiInfo: {
        apiId: '',
        appId: '',
        apiNm: '',
        appkey: '',
        apiType: 1
      },
      step: [
        {
          icon: 'iconBase',
          name: '基本信息'
        },
        {
          icon: 'iconApply',
          name: '申请状态'
        }
      ],
      active: 0
    }
  },
  methods: {
    showDrawer(apiInfo) {
      if (apiInfo.apiId) {
        this.apiInfo.apiNm = apiInfo.apiNm
        this.apiInfo.apiId = apiInfo.apiId
        this.apiInfo.apiType = apiInfo.apiType
      }
      this.drawerVisible = true
      this.$nextTick(() => this.$refs.pacModule.getPlatforms())
    },
    next(data) {
      this.apiInfo.appId = data.appId
      this.active++
    },
    beforeClose() {
      this.apiInfo.apiId = ''
      this.apiInfo.appkey = ''
      if (this.$refs.pacModule.clearForm) this.$refs.pacModule.clearForm()
      this.active = 0
      this.drawerVisible = false
    },
    refresh(test) {
      this.$emit('refresh')
      if (test) this.$refs.pacPersonalDrawer.showDrawer(Object.assign({}, this.apiInfo, { tab: 'test' }))
      this.beforeClose()
    }
  }
}
</script>

<style lang="scss">
.tag-drawer.pac-apply-drawer {
  .el-drawer__body {
    .drawer-wrap {
      top: 100px;
    }
  }
}
</style>
